<template>
    <div class="subassembly-page">
        <el-drawer v-model="drawerVisible" :size="dynamicWidth" :with-header="false">
            <el-scrollbar>
                <component :is="currentComponent" @child-click="shareDataMethod" />
            </el-scrollbar>
        </el-drawer>

        <el-dialog v-model="dialogVisible">
            <el-scrollbar>
                <component :is="currentComponent" />
            </el-scrollbar>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { defineProps, ref, shallowRef, watchEffect, onMounted, watch, defineAsyncComponent, computed, inject } from 'vue';

const props = defineProps({
    menuInfo: Object
});


// 组件对象映射关系
const componentMap = {
    "ASIDE-MENU-MUSIC": () => import("../General/Music/index.vue"),
    "ASIDE-MENU-BLOG": () => import("../General/Blog/index.vue"),
    "ASIDE-MENU-SPACE": () => import("../General/Space/index.vue"),
    "ASIDE-MENU-COLLECTION": () => import("../General/Collection/index.vue"),
    "ASIDE-MENU-FILE": () => import("../General/File/index.vue"),
    "ASIDE-MENU-DECORATION": () => import("../General/Decoration/index.vue"),
    "ASIDE-MENU-SETTING": () => import("../General/Setting/index.vue"),
    "ASIDE-MENU-CONTACT": () => import("../General/Contact/index.vue")
};

// 动态存储组件
const currentComponent = shallowRef<null | any>(null);

// 缓存加载过的组件
const componentCache = new Map<string, any>();

// 控制抽屉和对话框的展示
const drawerVisible = ref<boolean>(false);
const dialogVisible = ref<boolean>(false);

const dynamicWidth = computed((): any => {
    return drawerVisible ? '50%' : '';
})

watch(() => props.menuInfo, (newValue: any, oldValue: any): void => {
    if (newValue.randomKey) {
        const menuType = newValue.currentMenuKey;
        const menuName = newValue.currentMenu;

        if (menuType === '/blog' && menuName === "ASIDE-MENU-BLOG") {
            dialogVisible.value = true;
        } else {
            drawerVisible.value = true;
        }
        // 检查组件是否已经加载过
        if (componentCache.has(menuName)) {
            currentComponent.value = componentCache.get(menuName);
        } else {
            // 加载组件
            const componentLoader = componentMap[menuName as keyof typeof componentMap];
            if (componentLoader) {
                // 使用defineAsyncComponent来动态加载组件
                const asyncComponent = defineAsyncComponent<Record<string, any>>(componentLoader);
                currentComponent.value = asyncComponent;

                // 将加载过的组件存储到缓存中
                componentCache.set(menuName, asyncComponent);
            } else {
                currentComponent.value = null;
            }
        }
    } else {
        return;
    }
}, { deep: true });


// 使用inject接收父组件provide的方法
const shareDataMethod = inject<() => void>('shareDataMethod')

</script>

<style scoped lang="scss">
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.subassembly-page {
    height: 100vh;
}
</style>